<template>
	<view class='my-add-path'>

		<view class='path-item'>
			<view>收 件 人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name" />
		</view>

		<view class='path-item'>
			<view>手 机 号</view>
			<input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel" />
		</view>

		<view class='path-item'>
			<view>所在地址</view>
			<view @tap='showCityPicker'>{{pathCity}} </view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm">
			</mpvue-city-picker>
		</view>

		<view class='path-item'>
			<view>详细地址</view>
			<input type="text" value="" placeholder="5到60个字符" v-model="pathObj.address" />
		</view>

		<view class='path-item'>
			<view>设为默认地址</view>
			<radio-group name="" @change="radioChange">
				<label class="radio">
					<radio  color="#FF3333" :checked="pathObj.isDefault==1?true:false" /><text></text>
				</label>
			</radio-group>
		</view>

	</view>
</template>

<script>
	import mpvueCityPicker from 'mpvue-citypicker';
	import {
		mapActions,mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				cityName: "请选择",
				pickerValueDefault: [0, 0, 1],
				pathObj: {
					name: "", //收货人
					tel: "", //收货人电话
					province: "", //省
					city: "", //市
					district: "", //区
					address: "", //收货人详细地址
					isDefault: false //默认地址
				},
				i: -1,
				//是否是修改状态
				isStatus: false
			}

		},
		components: {
			mpvueCityPicker
		},
		computed:{
			...mapGetters('path',['defaultPath']),
					pathCity(){
						if( this.pathObj.province ){
							return `${this.pathObj.province}-${this.pathObj.city}-${this.pathObj.district}`
						}else{
							return '请选择';
						}
					}
				},
		//页面生命周期
		async onNavigationBarButtonTap() {

	this.pathObj.isDefault=this.pathObj.isDefault==true?1:0
			if (this.isStatus) {
				
				try {	//
					let res = await this.$Request({
						url: "/api/updateAddress",
						method: "POST",
						header: {
							token: true
						},
						data: {
							...this.pathObj
						}
				
					})
				
				//修改
			
					this.updatePathFn({
						index: this.i,
						item: this.pathObj
					}),
					uni.showToast({
						title:"修改成功"
					})
					uni.navigateBack({
						delta: 1 //点击保存返回上一页
					})
				
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})
				
				}
				
	
			} else {
				try {	//新增
					let res = await this.$Request({
						url: "/api/addAddress",
						method: "POST",
						header: {
							token: true
						},
						data: {
							...this.pathObj
						}

					})
// console.log(this.defaultPath);
console.log(this.pathObj);
					this.createPathFn(this.pathObj)
					uni.navigateBack({
						delta: 1 //点击保存返回上一页
					})

				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: '请求失败',
						icon: 'none'
					})

				}

			}


		},
		onLoad(e) {

			if (e.data) {
				uni.setNavigationBarTitle({
					title: "修改地址"
				})
				let result = JSON.parse(e.data)

				this.pathObj = result.item;
				this.i = result.index
				this.isStatus = true

			}
		},
		methods: {
	
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				let arr = e.label.split("-");
				this.pathObj.province = arr[0];
				this.pathObj.city = arr[1];
				this.pathObj.district = arr[2];
			},

			...mapActions('path', ['createPathFn', 'updatePathFn']),

			//是否默认地址
			radioChange() {
				console.log(this.pathObj.isDefault);
this.pathObj.isDefault = this.pathObj.isDefault==1?true:false;
this.pathObj.isDefault =!this.pathObj.isDefault;

console.log(this.pathObj.isDefault);

			}
		}
	}
</script>

<style scoped>
	.my-add-path {
		padding-left: 20rpx;
	}

	.path-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16rpx 0;
		width: 100%;
		border-bottom: 2rpx solid #CCCCCC;
	}

	.path-item input {
		flex: 1;
		text-align: left;
		padding-left: 10rpx;
	}
</style>
